<template>
  <div class="container-auditModify">
    <el-row>
      <el-form :model="form"
               ref="form"
               :inline="true"
               label-width="180px"
               :rules="rules">
        <el-col :span="24">
          <el-col :span="24"
                  style="margin-bottom:20px;">
            <span>审核详情</span>
          </el-col>
          <el-col :span="24">
            <el-collapse v-model="activeNames"
                         @change="handleActiveChange">
              <el-collapse-item title="基本信息"
                                name="1">
                <el-col :span="24">
                  <el-col :span="16">
                    <el-form-item label="单位名称"
                                  class="header-unitname"
                                  prop="unitName">
                      <el-input v-model="form.unitName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人"
                                  class="header-unitname"
                                  prop="contactName">
                      <el-input v-model="form.contactName"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话"
                                  class="header-unitname"
                                  prop="contactPhone">
                      <el-input v-model="form.contactPhone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱地址"
                                  class="header-unitname"
                                  prop="mail">
                      <el-input v-model="form.mail"></el-input>
                    </el-form-item>
                    <el-form-item label="统一社会信用代码"
                                  class="header-unitname"
                                  prop="creditCode">
                      <el-input v-model="form.creditCode"></el-input>
                    </el-form-item>
                    <el-form-item label="营业执照"
                                  class="header-unitname"
                                  prop="creditImgUrl">
                      <el-upload class="avatar-uploader"
                                 action=""
                                 :on-success="handleAvatarSuccess"
                                 :http-request="uploadFileCreadit"
                                 multiple
                                 :show-file-list="false"
                                 name="pictureFileCreadit"
                                 accept=".jpg,.png">
                        <img v-if="form.creditImgUrl"
                             :src="form.creditImgUrl"
                             class="avatar">
                        <i v-else
                           class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-collapse-item>
              <el-collapse-item title="详细信息"
                                name="2">
                <el-col :span="16"
                        class="unit-address">
                  <el-form-item label="单位地址"
                                style="width:100%!important;display:flex;flex-direction:row;justify-content:space-between;">
                    <el-col :span="24">
                      <el-col :span="18">
                        <el-select v-model="form.province"
                                   placeholder="请选择省"
                                   class="province-select"
                                   @change="getCity(form.province)">
                          <el-option v-for="item in province"
                                     :key="item.value"
                                     :label="item.province"
                                     :value="item.province_no">
                          </el-option>
                        </el-select>
                        <el-select v-model="form.city"
                                   placeholder="请选择市"
                                   class="city-select"
                                   @change="getArea(form.city)">
                          <el-option v-for="item in city"
                                     :key="item.value"
                                     :label="item.city"
                                     :value="item.city_no">
                          </el-option>
                        </el-select>
                        <el-select v-model="form.district"
                                   placeholder="请选择区"
                                   class="area-select"
                                   @change="changeArea(form.district)">
                          <el-option v-for="item in district"
                                     :key="item.value"
                                     :label="item.area"
                                     :value="item.area_no">
                          </el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="6">

                        <el-input v-model="form.addr"
                                  style="width:100%!important;"
                                  class="address"></el-input>
                      </el-col>
                    </el-col>

                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-col :span="16">
                    <el-form-item label="法人姓名"
                                  class="header-unitname">
                      <el-input v-model="form.legalName"></el-input>
                    </el-form-item>
                    <el-form-item label="法人证件类型"
                                  class="header-unitname"
                                  id="card-style">
                      <el-select v-model="form.legalCardType"
                                 placeholder="请选择证件类型">
                        <el-option v-for="item in carTypeArr"
                                   :key="item.value"
                                   :label="item.name"
                                   :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="法人证件号码"
                                  class="header-unitname">
                      <el-input v-model="form.legalCardNo"></el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-collapse-item>
              <el-collapse-item title="其它信息"
                                name="3">
                <el-col :span="24">
                  <el-col :span="16"
                          class="yewu-style">
                    <el-form-item label="业务范围"
                                  class="header-unitname">
                      <el-select v-model="form.bussi_type"
                                 clearable
                                 multiple
                                 filterable
                                 allow-create
                                 default-first-option
                                 @change="onTagChange"
                                 placeholder="输入自定义标签后,用Enter回车添加">
                        <el-option v-for="item in tagArr"
                                   :key="item.label"
                                   :label="item.label"
                                   :value="item.label"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="独立域名"
                                  class="header-unitname">
                      <el-input v-model="form.ind_domain"></el-input>
                    </el-form-item>
                    <el-form-item label="LOGO"
                                  class="header-unitname">
                      <el-upload class="avatar-uploader"
                                 action=""
                                 :show-file-list="false"
                                 :on-success="handleAvatarSuccess"
                                 :http-request="uploadFile"
                                 multiple
                                 name="pictureFile"
                                 accept=".jpg,.png">
                        <img v-if="form.companyLogoUrl"
                             :src="form.companyLogoUrl"
                             class="avatar">
                        <i v-else
                           class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                    <el-form-item label="形象图片"
                                  class="header-unitname">
                      <el-upload class="avatar-uploader"
                                 action=""
                                 :on-success="handleAvatarSuccess"
                                 :http-request="uploadFileImage"
                                 multiple
                                 :show-file-list="false"
                                 name="pictureFileImage"
                                 accept=".jpg,.png">
                        <img v-if="form.imagePictureUrl"
                             :src="form.imagePictureUrl"
                             class="avatar">
                        <i v-else
                           class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-collapse-item>
            </el-collapse>
          </el-col>
          <el-col :span="24"
                  class="footer-margin">
            <el-button @click="onBack"
                       class="header-search">返回</el-button>
            <el-button @click="onAuditeModify('form')"
                       type="primary"
                       class="header-search">确定</el-button>

          </el-col>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { UnitAuditApi } from "@/services/orgainzeManage"
export default {
  data () {
    return {
      carTypeArr: [],
      activeNames: ['1', '2', '3'],
      company_id: this.$route.query.company_id,
      type: '',
      rulesReject: {
        content: [
          { required: true, message: '驳回内容不能为空', trigger: 'blur' }
        ]
      },
      form: {
        bussi_type: '',
        ind_domain: '',
        legalCardNo: '',
        legalCardType: '',
        legalName: '',
        province: "",
        province_name: "",
        city: "",
        city_name: "",
        district: "",
        district_name: "",
        addr: '',
        creditCode: '',
        mail: '',
        contactPhone: '',
        contactName: '',
        unitName: '',
        creditImgUrl: '',//营业图片
        creditImgUrlRelat: '',//营业图片-相对
        companyLogoUrl: '',//logo图片,
        companyLogoUrlRelat: '',//logo图片-相对
        imagePictureUrl: '',//形象图片
        imagePictureUrlRelat: '',//形象图片-相对
      },
      province: [],//省下拉框数据
      city: [],//市下拉框数据
      district: [],//区下拉框数据
      rules: {
        unitName: [
          { required: true, message: '单位名称不能为空', trigger: 'blur' }
        ],
        contactName: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' }
        ],
        mail: [
          { required: true, message: '邮箱地址不能为空', trigger: 'blur' }
        ],
        creditImgUrl: [
          { required: true, message: '执业营照不能为空', trigger: 'blur' }
        ],
        creditCode: [
          { required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }
        ]
      },
      imageUrl: '',
      tagArr: []
    }
  },
  methods: {
    onTagChange (val) {
      console.log('csy_form.tag=', val)
    },
    //获取省列表数据
    getProvince () {
      UnitAuditApi.getProvince({
        params: {
          area_type: '1'
        }
      }).then(res => {
        this.province = res.data
      }, err => {
        console.log(err)
      })
    },
    //获取市列表接口
    getCity (data) {
      console.log('data-csy=', data)
      this.form.city = ""
      this.form.district = ""
      UnitAuditApi.getCity({
        params: {
          area_type: '2',
          province_no: data
        }
      }).then(res => {
        this.city = res.data
        let obj = {};
        obj = this.province.find((item) => {//这里的userList就是上面遍历的数据源
          return item.province_no === data;//筛选出匹配数据
        });
        this.form.province_name = obj.province
      }, err => {
        console.log(err)
      })
    },
    //获取区列表接口
    getArea (data) {
      this.form.district = ""
      UnitAuditApi.getArea({
        params: {
          area_type: '3',
          city_no: data
        }
      }).then(res => {
        this.district = res.data
        let obj = {};
        obj = this.city.find((item) => {//这里的userList就是上面遍历的数据源
          return item.city_no === data;//筛选出匹配数据
        });
        this.form.city_name = obj.city
      }, err => {
        console.log(err)
      }, err => {
        console.log(err)
      })
    },
    //改变区的数据
    changeArea (data) {
      let obj = {};
      obj = this.district.find((item) => {//这里的userList就是上面遍历的数据源
        return item.area_no === data;//筛选出匹配数据
      });
      this.form.district_name = obj.area
    },
    //获取证件类型下拉列表数据
    getCard () {
      UnitAuditApi.getCard({
        params: {
          code_type: 'legalCardType',
          is_page: '0'
        }
      }).then((res) => {
        this.carTypeArr = res.data.list;
      }).catch((error) => {
        console.log(error)
      })
    },
    //折叠板
    handleActiveChange (va) {
      console.log(va)
    },
    //营业执照图片上传或修改
    uploadFileCreadit (params) {
      const isLt2M = params.file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      } else {
        var formData = new FormData();
        //添加图片时用的方法是append
        formData.append("module", 'company');
        formData.append("pic_file_apk[]", params.file);
        UnitAuditApi.uploadFile({
          data: formData
        }).then((res) => {
          if (res.code == 0) {
            this.form.creditImgUrl = res.data.upload_success[0].absolute_url;
            this.form.creditImgUrlRelat = res.data.upload_success[0].relative_url;
          }
        }).catch((error) => {
          console.log(error);
        });
      }
    },
    //logo图片上传或更新
    uploadFile (params) {
      const isLt2M = params.file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      } else {
        var formData = new FormData();
        //添加图片时用的方法是append
        formData.append("module", 'company');
        formData.append("pic_file_apk[]", params.file);
        UnitAuditApi.uploadFile({
          data: formData
        }).then((res) => {
          if (res.code == 0) {
            this.form.companyLogoUrl = res.data.upload_success[0].absolute_url;
            this.form.companyLogoUrlRelat = res.data.upload_success[0].relative_url;
          }
        }).catch((error) => {
          console.log(error);
        });
      }
    },
    //形象图片上传或修改
    uploadFileImage (params) {
      const isLt2M = params.file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      } else {
        var formData = new FormData();
        //添加图片时用的方法是append
        formData.append("module", 'company');
        formData.append("pic_file_apk[]", params.file);
        UnitAuditApi.uploadFile({
          data: formData
        }).then((res) => {
          if (res.code == 0) {
            this.form.imagePictureUrl = res.data.upload_success[0].absolute_url;
            this.form.imagePictureUrlRelat = res.data.upload_success[0].relative_url;
          }
        }).catch((error) => {
          console.log(error);
        });
      }
    },
    //返回
    onBack () {
      this.$router.push('/unitAudit')
    },
    //确定修改
    onAuditeModify (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          UnitAuditApi.onModifyCompany({
            data: {
              name: this.form.unitName,
              domain_name: this.form.ind_domain,
              logo: this.form.companyLogoUrlRelat,
              province: this.form.province,
              province_name: this.form.province_name,
              city: this.form.city,
              city_name: this.form.city_name,
              district: this.form.district,
              district_name: this.form.district_name,
              address: this.form.addr,
              email: this.form.mail,
              lead: this.form.contactName,
              lead_phone: this.form.contactPhone,
              legal_person: this.form.legalName,
              certificates_type: this.form.legalCardType,
              certificates_num: this.form.legalCardNo,
              license_num: this.form.creditCode,
              license_img: this.form.creditImgUrlRelat,
              company_id: this.$route.query.company_apply_id,
              bussi_type: this.form.bussi_type.join(','),
              image_picture: this.form.imagePictureUrlRelat
            }
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success('操作成功!')
              this.$router.push('/unitAudit')
            }
          }).catch((error) => {
            console.log(error)
          })
        } else {
          console.log('error submit!');
          return false;
        }
      })
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //获取单位详细信息
    getUnitInfo () {
      UnitAuditApi.getCompDetail({
        params: {
          company_apply_id: this.$route.query.company_apply_id
        }
      }).then((res) => {
        this.tagArr = [];
        this.form.creditImgUrl = res.data.credit_img_url;//营业图片
        this.form.creditImgUrlRelat = res.data.credit_img;//营业图片-相对
        this.form.companyLogoUrl = res.data.company_logo_url;//logo图片
        this.form.companyLogoUrlRelat = res.data.logo;//logo图片-相对
        this.form.imagePictureUrl = res.data.index_img_url;//形象图片
        this.form.imagePictureUrlRelat = res.data.index_img;//形象图片-相对
        this.form.legalCardNo = res.data.legal_card_no;
        this.form.legalCardType = res.data.legal_card_type;
        this.form.legalName = res.data.legal_name;
        this.form.addr = res.data.addr;
        this.form.creditCode = res.data.credit_code;
        this.form.mail = res.data.email;
        this.form.contactPhone = res.data.contact_phone;
        this.form.bussi_type = res.data.bussi_type.split(',');
        //select下拉数据
        if (res.data.bussi_type.split(',').length != 0) {
          res.data.bussi_type.split(',').forEach((ele) => {
            this.tagArr.push({
              label: ele
            })
          })
        };
        this.form.ind_domain = res.data.ind_domain;
        this.form.contactName = res.data.contact_name;
        this.form.unitName = res.data.company_name;
        this.form.province_name = res.data.province_no;
        this.form.province = res.data.province;
        if (res.data.tag.split(',').length != 0) {
          res.data.tag.split(',').forEach((ele) => {
            this.tagArr.push({
              label: ele
            })
          })
        };
        this.getCity(this.form.province_name);
        this.form.city_name = res.data.city_no;
        this.form.city = res.data.city;
        this.getArea(this.form.city_name)
        this.form.district_name = res.data.area_no;
        this.form.district = res.data.area;
        this.changeArea(this.form.district_name);






        console.log('单位信息=', res)
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  created () {
    //获取省
    this.getProvince()
    //获取证件类型下拉列表数据
    this.getCard();
    //获取单位详细信息
    this.getUnitInfo();
  }
}
</script>
<style lang="scss" scoped>
/deep/ .yewu-style .el-select {
  width: 100% !important;
}
/deep/ #card-style .el-select {
  width: 100% !important;
}
/deep/ .unit-address .el-select {
  display: inline-block;
  position: relative;
  width: 32.3% !important;
}
// .province-select {
//   width: 150px;
// }
// .city-select {
//   width: 150px;
// }
// .area-select {
//   width: 150px;
// }
// .address {
//   width: 190px;
// }

.footer-margin {
  text-align: center;
  margin-top: 20px;
}
.bottom-reject-style {
  text-align: center;
}
.reject-style {
  width: 100% !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.reject-style /deep/ .el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
  width: 100% !important;
}
.header-search {
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/ .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
/deep/ .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.header-unitname {
  width: 100% !important;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/deep/.el-form--inline .el-form-item__content {
  display: inline-block;
  vertical-align: top;
  width: 100% !important;
}
.container-auditModify {
  padding: 20px;
  background: white;
  height: 100%;
  overflow-y: scroll;
}
</style>

